div {
  border: solid;
  box-sizing: border-box;
}

@function vw($px: 12) {
  @return ($px/375 * 100vw);
}

body,
ul,
li,
ol,
p,
h3 {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: vw(12);
}

.top-nav {
  display: flex;
  height: vw(30);
  .left {
    flex: 0 0 vw(40);
  }
  .center {
    flex: 1 0 vw(40);
  }
  .right {
    flex: 0 0 vw(40);
  }
}

.card-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;

  div {
    flex: 0 0 vw(82);
    height: vw(57);
    margin-top: vw(10);
  }

  .item {
    * {
      border: solid;
    }
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}
